<template>
  <div id="app">
    <Layout>
      <Header>

      </Header>
      <Layout>
        <Sider hide-trigger :style="{background: '#212121'}">
          <Menu active-name="home" theme="light" width="auto" :open-names="['1']">
            <MenuItem name="home" to="/">主页</MenuItem>
            <MenuItem name="iview_table" to="/iview_table">表格</MenuItem>
            <MenuItem name="iview_form" to="/iview_form">表单</MenuItem>
            <MenuItem name="iview_button" to="/iview_button">按钮</MenuItem>
            <MenuItem name="iview_nav" to="/iview_nav">导航</MenuItem>
            <MenuItem name="iview_layout" to="/iview_layout">布局</MenuItem>
            <MenuItem name="iview_other" to="/iview_other">其他</MenuItem>
          </Menu>
        </Sider>
        <Layout :style="{padding: '20px', backgroundColor: '#616161'}">
          <Content :style="{minHeight: '280px'}">
            <router-view/>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>

<style lang="less">

body, html {
  width: 100%;
  height: 100%;
}

.ivu-layout {
  width: 100%;
  height: 100%;
}

#app {
  width: 100%;
  height: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.layout{
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
</style>
